<template>
  <div class="bank_account_page">
    <div class="search_box">
      <div class="search_input_box">
        <el-form label-position="right" label-width="100px">
          <el-form-item label="开户银行" style="margin: 0;">
            <el-select v-model="form.bankDeposit" style="width: 260px;" class="input">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in bankList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="search_btn" @click="search">
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button type="primary" class="add_btn" @click="addFn">
        <i class="el-icon-plus"></i>
        新增账户
      </el-button>
    </div>
    <div class="mod" v-if="detailObj.enterpriseBank.bankNumber">
      <div class="title">
        <i class="icon"></i>
        对公认证账户
      </div>
      <div class="bank_card_content">
        <div class="bank_list">
          <div class="bank_item">
            <div class="name_box">
              <div class="name">{{ filterBank(detailObj.enterpriseBank.bankDeposit) }}</div>
              <img src="@/assets/authenticate/authenticate_status.png" alt="" class="status_icon">
            </div>
            <div class="card_number">{{ detailObj.enterpriseBank.bankNumber }}</div>
            <div class="address">{{ detailObj.enterpriseBank.bankBranch }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        企业银行账户
      </div>
      <div class="table_content">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            v-bind="item"
          >
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="editFn(scope.row)">编辑</el-button>
                <el-popconfirm title="确定要删除吗？" @confirm="deleteFn(scope.row.id)" v-if="scope.row.status === '2'">
                  <el-button style="margin-left: 20px;" slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
        </el-table>
        <Pagination
          :hidden="pagination.total === 0"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.pageNum"
          :limit="10"
          @pagination="paginationChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { bankList, delBank } from '@/api/companyManage'
import { getCompanyMsg } from '@/api/production'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      // status 状态 1:对公认证账户(不可删除)2:企业账户
      form: {
        bankDeposit: '',
      },
      bankList: [],
      columns: [],
      tableData: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      detailObj: {
        enterpriseBank: {},
        adminOperation: {}
      },
    }
  },
  created() {
    this.columns = [
        {
          type: 'index',
          label: '序号'
        },
        {
          prop: 'bankDeposit',
          label: '开户银行',
          formatter: (row, column, cellValue, index) => {
            const item = this.bankList.find((item) => cellValue === item.dictValue)
            if (item) {
              return item.dictLabel
            }
          },
        },
        {
          prop: 'bankProvinces',
          label: '开户所在地',
          formatter: (row, column, cellValue, index) => {
            return `${cellValue}/${row.bankCities}`
          }
        },
        {
          prop: 'bankNumber',
          label: '银行账号'
        },
        {
          prop: 'bankBranch',
          label: '开户支行'
        },
        {
          prop: 'bankCode',
          label: '大额行号'
        },
      ]
  },
  mounted() {
    this.getBankList().then(() => {
      this.getBankAccountList()
    })
    this.getCompanyMsg()
  },
  methods: {
    // 获取银行List
    getBankList() {
      return new Promise((resolve, reject) => {
        this.getDicts('peacevisa').then((res) => {
          if (res.code === 200) {
            this.bankList = res.data
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    getCompanyMsg(){
      getCompanyMsg().then((res) => {
        if (res.code === 200) {
          this.detailObj = res.data
        }
      })
    },
    search() {
      this.getBankAccountList()
    },
    // table数据
    getBankAccountList() {
      this.loading = true
      bankList({
        ...this.form,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.loading = false
        this.tableData = res.rows
        this.pagination.total = res.total
      }).catch(() => {
        this.loading = false
      })
    },
    paginationChange({ page: pageNum, limit: pageSize }) {
      this.pagination.pageNum = pageNum
      this.pagination.pageSize = pageSize
      this.getBankAccountList()
    },
    addFn() {
      this.$router.push({
        path: '/companyManage/addBank'
      })
    },
    editFn(item) {
      this.$router.push({
        path: '/companyManage/addBank',
        query: {
          id: item.id,
          status: item.status,
        }
      })
    },
    deleteFn(id) {
      delBank(id).then((res) => {
        this.$message({
          type: 'success',
          message: '删除成功',
        })
        this.getBankAccountList()
      })
    },
    filterBank(value) {
      const item = this.bankList.find((item) => item.dictValue === value)
      if (item) {
        return item.dictLabel
      } else {
        return ''
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.bank_account_page {
  .search_box {
    box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 112px;
    padding: 0 40px;
    margin-bottom: 16px;
    .search_input_box {
      display: flex;
      align-items: center;
      .search_name {
        flex-shrink: 0;
        color: #777;
        font-size: 14px;
        margin-right: 10px;
      }
      .input {
        width: 415px;
        margin-right: 20px;
      }
      .search_btn {
        width: 88px;
      }
    }
    .add_btn {
      font-weight: 500;
    }
  }
  .mod {
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    margin-bottom: 16px;
    padding-top: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      padding-left: 16px;
      .icon {
        display: block;
        width: 3px;
        height: 16px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
    .bank_card_content {
      padding: 34px 0 36px 40px;
      .bank_list {
        .bank_item {
          width: 370px;
          height: 236px;
          background: url('../../../assets/companyManage/bank_card_bg.png') no-repeat 0 0;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 28px 33px 36px 25px;
          .name_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name {
              color: #fff;
              font-size: 18px;
              font-weight: 600;
            }
            .status_icon {
              width: 60px;
              height: 18px;
            }
          }
          .card_number {
            color: #fff;
            font-size: 26px;
            font-weight: 600;
          }
          .address {
            color: #fff;
            font-size: 14px;
          }
        }
      }
    }
    .table_content {
      padding: 21px 16px 24px;
    }
  }
}
</style>
